<!--
 * @Author: zhaoziyin
 * @Date: 2022-09-07 20:28:26
 * @LastEditTime: 2022-09-08 14:12:55
 * @LastEditors: zhaoziyin
 * @Description: 一直游到海水变蓝
 * @FilePath: \项目\Data-visualization\src\pages\government\components\Left2.vue
 * 别乱动！
-->
<template>
  <div ref="container" style="height:90%"></div>
</template>

<script>
  import { Scatter } from '@antv/g2plot';
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadChart(){
fetch('https://gw.alipayobjects.com/os/antfincdn/t81X1wXdoj/scatter-data.json')
  .then((res) => res.json())
  .then((data) => {
    const scatterPlot = new Scatter(this.$refs['container'], {
      appendPadding: 30,
      data,
      xField: 'x',
      yField: 'y',
      colorField: 'genre',
      color: [
        'r(0.4, 0.3, 0.7) 0:rgba(255,255,255,0.5) 1:#5B8FF9',
        'r(0.4, 0.4, 0.7) 0:rgba(255,255,255,0.5) 1:#61DDAA',
      ],
      sizeField: 'size',
      size: [5, 20],
      shape: 'circle',
      yAxis: {
        nice: true,
        line: {
          style: {
            stroke: '#eee',
          },
        },
      },
      xAxis: {
        grid: {
          line: {
            style: {
              stroke: '#eee',
            },
          },
        },
        line: {
          style: {
            stroke: '#eee',
          },
        },
      },
    });
    scatterPlot.render();
  });

    }
  },
  created() {},
  mounted() {
    this.loadChart();
  },
};
</script>
<style scoped>
</style>